{% extends 'layout.html' %}

{% block title %}
Home
{% endblock %}

{% block content %}
{% if session['user'] %}
  <div class="search_form">
    <form method="post" action="/filter">
      <div class="container">
        <div class="form-row col-sm-9 mx-auto">
          <div class="form-group col-sm-4">
            <label for="max_price">Max price</label>
            <input type="text" class="form-control" id="max_price" name="max_price" placeholder="any" value="{{ filters['max_price'] }}">
          </div>
          <div class="form-group col-sm-4">
            <label for="max_size">Max size</label>
            <input type="text" class="form-control" id="max_size" name="max_size" placeholder="any" value="{{ filters['max_size'] }}">
          </div>
          <div class="form-group col-sm-4">
            <label for="max_rooms">Max rooms</label>
            <input type="text" class="form-control" id="max_rooms" name="max_rooms" placeholder="any" value="{{ filters['max_rooms'] }}">
          </div>
        </div>
        <div class="form-row col-sm-9 mx-auto">
          <div class="form-group col-sm-4">
            <label for="min_price">Min price</label>
            <input type="text" class="form-control" id="min_price" name="min_price" placeholder="any" value="{{ filters['min_price'] }}">
          </div>
          <div class="form-group col-sm-4">
            <label for="min_size">Min size</label>
            <input type="text" class="form-control" id="min_size" name="min_size" placeholder="any" value="{{ filters['min_size'] }}">
          </div>
          <div class="form-group col-sm-4">
            <label for="min_rooms">Min rooms</label>
            <input type="text" class="form-control" id="min_rooms" name="min_rooms" placeholder="any" value="{{ filters['min_rooms'] }}">
          </div>
        </div>
      </div>
      <div class="center_button">
        <button class="set_search_criteria">Set search criteria</button>
        {% if notifications_enabled %}
          <button type="button" class="toggle_notification enabled" onclick="toggle_notification()">Disable notifications</button>
        {% else %}
          <button type="button" class="toggle_notification disabled" onclick="toggle_notification()">Enable notifications</button>
        {% endif %}
      </div>
    </form>
  </div>
{% else %}
  <div class="container">
    <div class="row">
      <div class="intro col-sm-9 mx-auto">
        <p>Flathunter helps you find somewhere to live in Berlin, by periodically fetching apartment listings from the major property portals (ImmoScout, ImmoWelt, Kleinanzeigen and WG-Gesucht) and sending the details of apartments that match your criteria to you in a Telegram message.</p>
      </div>
    </div>
  </div>
{% endif %}

<div id="expose_partial" class="container">
{% include "exposes.html" %}
</div>

{% if session['user'] %}
  <div class="logout_div center_button">
    <button class="login_telegram" onclick="document.location='/logout'">
      Logout
    </button>
  </div>
{% else %}
  <div class="login_div center_button">
    {% if bot_name %}
      <script async src="https://telegram.org/js/telegram-widget.js?9" data-telegram-login="{{ bot_name }}" data-size="large" data-userpic="false" data-auth-url="https://{{ domain }}/login_with_telegram" data-request-access="write"></script>
    {% else %}
      <button class="login_telegram" onclick="document.location='{{ login_url }}'">
        <i class="telegram_icon"></i>
        Login as Dummy User
      </button>
    {% endif %}
  </div>
{% endif %}

<div class="button-holder">
  <div>
    <p class="status-text">Last run: <span id="last-run">{{ last_run }}</span></p>
  </div>
</div>

<script>

function toggle_notification() {
  const button = document.getElementsByClassName("toggle_notification")[0]
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", function() {
    if (xhr.status != 201) {
      console.log("Error toggling notification status: " + xhr.status);
    } else {
      const response = JSON.parse(xhr.response);
      if (response.notifications_enabled) {
        button.classList.add("enabled");
        button.classList.remove("disabled");
        button.innerHTML = "Disable notifications";
      } else {
        button.classList.add("disabled");
        button.classList.remove("enabled");
        button.innerHTML = "Enable notifications";
      }
    }
  });
  xhr.open("POST", "/toggle_notifications");
  xhr.send();
}

</script>
{% endblock %}
